/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import { List, Avatar, Button, Divider, Spin } from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import { names } from '../config';

import Agree from './Agree';
import Branch from './Branch';
import Courier from './Courier';
import Kop from './Kop';
import Third from './Third';

// 图标
const prefix = process.env.NODE_ENV === 'development' ? '' : '/dist';
const icons = {
  wuliuyun: `${prefix}/source/wuliuyun.svg`,
  agree: `${prefix}/source/agree.svg`,
  taobao: `${prefix}/source/cainiao.svg`,
  courier: `${prefix}/source/courier.svg`,
  kop: `${prefix}/source/kop.svg`,
  pindd: `${prefix}/source/pdd.svg`,
  pdd_universal:`${prefix}/source/pdd.svg`,
};

// 添加组件合并组
const AddGroups = props => {
  const { children, type } = props;
  switch (type) {
    case 'agree':
      return <Agree>{children}</Agree>;
    case 'branch':
      return <Branch>{children}</Branch>;
    case 'courier':
      return <Courier>{children}</Courier>;
    case 'kop':
      return <Kop>{children}</Kop>;
    case 'pindd':
      return <Third type={type}>{children}</Third>;
    case 'pdd_universal':
      return <Third type={type}>{children}</Third>;
    case 'taobao':
      return <Third type={type}>{children}</Third>;
    default:
      return children;
  }
};

const { Item: ListItem } = List;
const { Meta: ListItemMeta } = ListItem;

@connect(({ loading }) => ({
  authing: loading.effects['source/auth'],
}))
class Add extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.list = [
      {
        key: 'wuliuyun',
      },
      {
        key: 'taobao',
      },
      {
        key: 'kop',
      },
      {
        key: 'pindd',
      },
      {
        key:'pdd_universal',
      },
    ];
  }

  renderItem = item => {
    return (
      <AddGroups key={item.key} type={item.key}>
        <ListItem
          extra={
            item.key === 'wuliuyun' && (
              <div>
                <Third type="wuliuyun" by="account">
                  <Button type="primary" ghost>
                    账号授权
                  </Button>
                </Third>
                <Divider type="vertical" />
                <Third type="wuliuyun" by="token">
                  <Button type="primary" ghost>
                    令牌授权
                  </Button>
                </Third>
              </div>
            )
          }
        >
          <ListItemMeta
            avatar={<Avatar size="large" src={icons[item.icon || item.key]} />}
            title={names[item.key].label}
            description={names[item.key].desc}
          />
        </ListItem>
      </AddGroups>
    );
  };

  render() {
    const { authing } = this.props;
    return (
      <div className={styles.list}>
        <Spin spinning={!!authing}>
          <List
            header="请选择您要添加的单号源类型"
            className="kb-list"
            dataSource={this.list}
            renderItem={this.renderItem}
          />
        </Spin>
      </div>
    );
  }
}

export { Add as default, Agree, Branch, Courier, Kop, Third };
